import React, { useState, useRef, useEffect } from 'react';
import { View } from '@tarojs/components';
import { PullToRefresh, VirtualList, InfiniteScroll, NavBar, Image } from '@antmjs/vantui';
import Taro,{getMenuButtonBoundingClientRect} from '@tarojs/taro';
import { getCoindetail } from '../../../../https/mine';
import { getUserInfo,diffTime } from '../../../../utils/const'
import './index.scss'

export default function ConinsDetail() {
    const btn = getMenuButtonBoundingClientRect();
    const goods = () => {
        const initData = [
            {
                image: 'https://img.yzcdn.cn/vant/cat.jpeg',
                title:
                    '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',
                price: '¥165.00',
            },
            {
                image: 'https://img.yzcdn.cn/vant/cat.jpeg',
                title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',
                price: '¥361.00',
            },
            {
                image: 'https://img.yzcdn.cn/vant/cat.jpeg',
                title:
                    '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',
                price: '¥22.50',
            },
            {
                image: 'https://img.yzcdn.cn/vant/cat.jpeg',
                title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',
                price: '¥212.00',
            },
        ]
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(
                    new Array(Math.random() > 0.3 ? 10 : 8).fill('').map((_, index) => {
                        return {
                            index,
                            ...initData[index % 4],
                            isCutPrice: index % 2 === 0 ? true : false,
                        }
                    }),
                )
            }, 1400)
        })
    }
    const [data, setData] = useState([]);
    const [list,setList] = useState([])
    const mockGoods = goods;
    const infiniteScrollRef = useRef();
    const virtualListRef = useRef();

    useEffect(()=>{
        getCoinDetail()
    },[])

    const getCoinDetail = () => {
        Taro.showLoading({ title: '加载中' })
        getCoindetail({userId:getUserInfo()?.user_id}).then((res) => {
     
            Taro.hideLoading()
            if (res.success) {
               setList(res?.data)
            }
        })
    }


    const loadMore = async () => {
        return new Promise(async (resolve) => {
            const result = await mockGoods();
            const newData = data.concat(result);
            setData(newData);
            resolve(newData.length > 110 ? 'loading' : 'complete');
        });
    };

    const onRefresh = () => {
        return new Promise(async (resolve) => {
            infiniteScrollRef.current?.reset();
            const result = await mockGoods();
            await virtualListRef.current?.reset();
            setData(result);
            resolve(undefined);
        });
    };

    return (
        <View className='mycoins-frame-view'>
            <NavBar title='金币明细' leftArrow leftText={'返回'} onClickLeft={() => Taro.navigateBack()} fixed/>
            <View style={{paddingTop:btn.bottom+20}}>
            <PullToRefresh 
            //   onRefresh={onRefresh} 
            >
                <VirtualList
                    style={{ padding: 10, boxSizing: 'border-box' }}
                    height="calc(100vh - 135px)"
                    dataSource={list}
                    showCount={3}
                    ref={virtualListRef}
                    // footer={
                    //     <InfiniteScroll
                    //         parentClassName="van-virtual-list"
                    //         loadMore={loadMore}
                    //         ref={infiniteScrollRef}
                    //     />
                    // }
                    ItemRender={({ item }) => {
                        return (
                            <View className='list-bg-view'>
                                <View className='img'>
                                    <Image src={getUserInfo()?.avatar} radius={'50%'} width={100} height={100} />
                                </View>
                                <View className='info-text'>
                                    {item?.info||''}
                                </View>
                                <View className='time-view'>
                                    <View className='conins-num'>
                                        {`+${item?.coin_change}`}
                                    </View>
                                    <View className='time-title'>
                                     {item?.create_time ? diffTime(new Date(item?.create_time).getTime()) : '未知'}
                                    </View>
                                </View>
                            </View>
                        );
                    }}
                />
            </PullToRefresh>
            </View>
        </View>
    );
}